<template>
	<view>
		<view class="notice">
			<text class="title">社区公告栏</text>
			<text class="more" @click="goMoreNotice">更多...</text>
		</view>
		<view v-if="list.length">
			<view @click="goDetail(item.id)" class="notice-item" v-for="item in list" :key="item.id">
				<view class="notice-title">{{ item['公告标题'] }}</view>
				<view class="item-content">{{ item['公告内容'] }}
					<!-- <text class="item-more">更多>></text> -->
				</view>
				<view class="time">{{ item['发布时间'] }}</view>
			</view>
		</view>
		<view v-else>
			<van-empty description="暂无公告"></van-empty>
		</view>
		<!-- <view v-else class="empty-desc">暂无公告</view> -->
	</view>
</template>

<script>
import VanEmpty from '@/wxcomponents/vant/dist/empty/index.js'
import dayjs from 'dayjs'
export default {
	components: {
		VanEmpty
	},
	data() {
		return {
			params: {
				projectId: null,
				pagination: {
					current: 1,
					pageSize: 3
				},
				sorter: {
					field: "",
					order: 0
				}
			},
			list: [

			]
		};
	},
	created() {
		// this.getAnnouncement()
		// console.log('获取公告')
	},
	methods: {
		goMoreNotice() {
			if (!uni.getStorageSync('userInfo')) {
				uni.showModal({
					title: '您还未登陆,请先登陆后使用',
					success: res => {
						if (res.confirm) {
							uni.navigateTo({
								url: '../login/login'
							})
						}
					}
				})
				return
			}
			uni.navigateTo({
				url: '/activity/moreNotice/moreNotice'
			})
		},
		goDetail(id) {
			uni.navigateTo({
				url: '/activity/noticeDetail/noticeDetail?id=' + id
			})
		},
		getNotice() {
			this.params.projectId = uni.getStorageSync('projId')
			this.$http.post('vx/proclamation/list', this.params).then(res => {
				if (res.code == 10000) {
					res.data.list.forEach(item => {
						item.发布时间 = dayjs(item['发布时间']).format('YYYY-MM-DD HH:mm:ss')
					})
					this.list = res.data.list
				}
			})
		}
		// getAnnouncement(){
		// 	console.log('获取公告')
		// 	let p = {
		// 		发布范围:1,//登陆者的小区
		// 		状态:1,//已发布
		// 		pagination:{
		// 			pageSize: 5,
		// 			current:1
		// 		},
		// 		sorter:{
		// 			field:"生效时间",
		// 			order: 0
		// 		}
		// 	}
		// 	this.$http.post('ticketSystem/announcement/list',p).then(res=>{
		// 		if(res.code === 10000){
		// 			this.list = res.data.list
		// 		}
		// 	})
		// }
	}
}
</script>

<style lang="scss" scoped>
.empty-desc {
	height: 200rpx;
	display: flex;
	justify-content: center;
	align-items: center;
}

.notice {
	height: 42rpx;
	margin-top: 28rpx;
	margin-left: 20rpx;
	padding-left: 11rpx;
	line-height: 42rpx;
	border-left: 4rpx solid #FF971C;
	margin-bottom: 30rpx;
	display: flex;

	.title {
		font-size: 36rpx;
		// margin-right: 419rpx;
		flex: 1;
	}

	.more {
		color: $theme-color;
		font-size: 28rpx;
		padding-right: 20rpx;
	}
}

.notice-item {
	width: 670rpx;
	// height: 134rpx;
	margin-left: 40rpx;
	position: relative;
	padding-left: 20rpx;
	margin-bottom: 14rpx;
	border-bottom: 2rpx solid #ECECEC;

	&::before {
		content: '';
		position: absolute;
		width: 16rpx;
		height: 16rpx;
		border-radius: 50%;
		background-color: $theme-color;
		left: -8rpx;
		top: 10rpx;
	}

	.notice-title {
		font-size: 26rpx;
		// width: 21em;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.item-content {
		color: #333;
		font-size: 26rpx;
		margin-bottom: 10rpx;
		// width: 24em;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;

		.item-more {
			margin-left: 4rpx;
			color: #666;
		}
	}

	.time {
		color: #999;
		font-size: 24rpx;
	}
}</style>
